<template>
  <div v-show="$route.name == 'task-detail'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/task-list' }">任务管理记录</el-breadcrumb-item>
      <el-breadcrumb-item>任务详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="title-name">任务详情</div>
      <el-form :model="task" ref="task" label-width="120px" class="demo-saveForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="项目" prop="project_name">
              <el-select v-model="task.project_id" popper-class="dropdownbox" class="form-item" placeholder="请选择项目" disabled>
                <el-option v-for="item in projectList" :label="item.project_name"
                  :value="item.id" :key="item.id">
                  <span style="float: left">{{ item.project_name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="任务名称" prop="task_name">
              <el-input v-model="task.task_name" placeholder="请输入任务名称" class="form-item" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="负责人" prop="task_user_id">
              <el-select v-model="task.task_user_id" popper-class="dropdownbox" class="form-item" placeholder="请选择负责人" disabled>
                <el-option v-for="item in userList" :label="item.name"
                  :value="item.id" :key="item.id">
                  <span style="float: left">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="预计完成时间" prop="estimated_date">
              <el-date-picker type="date" placeholder="选择日期" v-model="task.estimated_date" class="form-item" disabled></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="任务描述" prop="desc">
              <el-input type="textarea" v-model="task.desc" class="form-item" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="文件：" prop="fileList" >
              <el-upload
                class="upload-demo"
                action="https://if.prowealthgroup.cn/task-produce/public/index.php/task-upload"
                :on-preview="handlePreview"
                multiple
                :limit="3"
                disabled
                :file-list="task.fileList">
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="开发笔记">
              <el-card style="width: 700px;">
                <quill-editor
                  v-model="task.note"
                  :options="editorOption"
                  :disabled="true">
                </quill-editor>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button  @click="back" style="margin-left: 5px">返回</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      id: '',
      loading: false,
      task: {},
      userList: [],
      projectList: [],
      editorOption: {
        theme: 'bubble',
        placeholder: ''
      }
    }
  },
  mounted() {
    this.getProject()
    this.getDevUserList()
  },
  methods: {
    // 获取开发人员
    async getDevUserList() {
      const params = {
        page: 1,
        pageSize: 100000
      }
      const { data: result } = await this.$http.get('/user', { params: params })
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      this.userList = result.data.map(item => {
        return {
          id: item.id,
          name: item.truename
        }
      })
      this.getTaskData()
    },
    // 获取任务
    async getTaskData() {
      if (this.$route.params.id) {
        this.id = this.$route.params.id
        localStorage.setItem('taskId', this.$route.params.id)
      } else {
        this.id = localStorage.getItem('taskId')
      }
      if (this.id) {
        this.getTask(this.id)
      }
    },
    // 获取项目
    async getProject() {
      const params = {
        page: 1,
        pageSize: 100000
      }
      const { data: result } = await this.$http.get('/project', { params: params })
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      this.projectList = result.data
    },
    async getTask(id) {
      const { data: result } = await this.$http.get('/task/' + id)
      if (result.status !== 200) {
        this.loading = false
        return this.$message.error(result.msg)
      }
      this.loading = false
      this.task = result.data
    },
    // 返回
    back () {
      this.$router.push({'name': 'task-list'})
    },
    // 点击文件下载
    handlePreview(file) {
      if (file) {
        this.download(file.url, file.name)
      }
    },
    // 下载指定目录文件
    async download(url, name) {
      var downUrl = url.url ? url.url : url
      await this.$http.post('/task-download', {url: downUrl, name: name}, { type: 'json',responseType:'blob' }).then(res => {
        if (res.status === 200) {
          const fileName = decodeURI(
            res.headers["content-disposition"].split("=")[1]
          )
          const blob = res.data
          const reader = new FileReader()
          reader.readAsDataURL(blob)
          reader.onload = (e) => {
            const a = document.createElement('a')
            a.download = fileName
            a.href = e.target.result
            a.click()
          }
          return this.$message.success('导出成功')
        }
        return this.$message.error(res.msg)
      }).catch (() => {
        return this.$message.error('导出失败')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.title-name {
  margin-bottom: 20px;
}
.form-item {
  width:300px
}
.upload-demo {
  width: 300px;
}
</style>